<template>
	<view class="pb-30">
		<image class="fixed top-0 index--1" style="width: 750rpx; height: 634rpx" src="/static/index-bg.png"></image>
		<uv-navbar :fixed="false" bgColor="transparent" :leftIcon="undefined" leftText="首页"></uv-navbar>

		<view class="header flex-column flex--center mt-30 mx-20">
			<image style="width: 290rpx; height: 44rpx" src="/static/user-top-icon1.png"></image>
			<view class="color-primary flex mt-20">
				<view class="item flex--center">
					<image style="width: 30rpx; height: 30rpx" src="/static/user-top-icon2.png"></image>
					<view>技术研发</view>
				</view>
				<view class="item flex--center">
					<image style="width: 30rpx; height: 30rpx" src="/static/user-top-icon2.png"></image>
					<view>成品加工</view>
				</view>
				<view class="item flex--center">
					<image style="width: 30rpx; height: 30rpx" src="/static/user-top-icon2.png"></image>
					<view>成品销售</view>
				</view>
			</view>
		</view>
		<uv-popup ref="popup" mode="center" @change="change">
			<view class="pop">
				<view class="title" style="">
					<view class="" v-if="isshow == '1'">
						修改用户名
					</view>
					<view class="" v-else>
						绑定手机号
					</view>
				</view>
					<view v-if="isshow == '2'" class="input-wrap flex--center px-30  bg-f" style="border-radius: 16rpx">
						<uv-input border="none" placeholder="请输入手机号" placeholderStyle="#bcbcbc" fontSize="28rpx" type="number"
							maxlength="11" v-model="params.phone"></uv-input>
					</view>
					<view v-if="isshow == '2'" class="input-wrap flex--center px-30 bg-f mt-20" style="border-radius: 16rpx">
						<uv-input border="none" placeholder="请输入验证码" placeholderStyle="#bcbcbc" fontSize="28rpx"
							v-model="params.code">
							<view slot="suffix">
								<view class="color-primary"  @click="sendCode" :class="{on:time2 != 0}">{{codeText2}}</view>
							</view>
						</uv-input>
					</view>
					<view v-if="isshow == '1'" class="input-wrap flex--center px-30  bg-f mt-20" style="border-radius: 16rpx">
						<uv-input v-model="params.nickName" border="none" placeholder="请输入用户名" placeholderStyle="#bcbcbc" fontSize="28rpx" ></uv-input>
					</view>
					<view class="btn" @click="submit">
						提交
					</view>
			</view>
		</uv-popup>
		<!-- 用户信息 -->
		<view class="user-info-wrap  mx-20 radius-20 relative">
			<image class="user-info-bg absolute inset-0 w-full h-full index--1" src="/static/index_1.png"></image>
			<view class="flex--center lfes" >
				<view class="flex-1 flex--center mx-10">
					<image class="user-avatar radius-999" @click="handleChangeAvatar"
						:src="userInfo.headImgUrl ? $util.addDomain(userInfo.headImgUrl) : '/static/default-avatar.png'">
					</image>
					
					<view class="flex-1" >
						<view style="display: flex;align-items: center;" class="fs-30" @click="open(1)">
						{{ userInfo.nickName || '匿名用户' }}
						<uv-icon name="edit-pen" color='#FF3C11' size="20"></uv-icon>
						</view>
						
						<view style="display: flex;align-items: center;" class="color-6 fs-22 mt-20" @click="open(2)">{{ userInfo.phone || '绑定手机号' }}
						</view>
					</view>
				</view>
				<button class="logout-button uv-reset-button color-primary border radius-999 flex-center-center ml-20 fs-24"
					@click="handleLogout">退出账号</button>
			</view>
			<view class="xz ">
				<view class="flex--center">
					<image src="../../../static/index_2.png" mode=""></image>
					<view class="">{{amount}}</view>
				</view>
				<view class="right" @click="gomingx">
					明细
					<uv-icon name="arrow-right" color='#FF3C11' size="16"></uv-icon>
				</view>
			</view>
		</view>
		<!-- 订单查询和在线客服 -->
		<view class="mt-20 order-and-customer-service flex-between">
			<view class="item bg-f radius-20 flex-center-center" @click="pageTo('/pages/order-list')">
				<view>
					<view class="fs-34 fw-700">订单查询</view>
					<view class="fs-24 color-9 mt-30">查询订单状态</view>
					<button
						class="mt-20 ml-0 query-button uv-reset-button color-primary border radius-999 flex-center-center fs-22">立即查询</button>
				</view>
				<image class="image" src="/static/user-order.png"></image>
			</view>
			<view class="item bg-f radius-20 flex-center-center">
				<view>
					<view class="fs-34 fw-700">在线客服</view>
					<view class="fs-24 color-9 mt-30 nowrap">小程序在线客服</view>
					<button
						class="mt-20 ml-0 query-button uv-reset-button color-primary border radius-999 flex-center-center fs-22"
						open-type="contact">立即进入</button>
				</view>
				<image class="image shrink-0" src="/static/user-customer-service.png"></image>
			</view>
		</view>
		<view class="fs-32 fw-700 my-30 text-center">美耐特 产品展示</view>
		<scroll-view scroll-y="true" class="centent" :show-scrollbar="false">
			<view class="goods-container flex-wrap">
				<view class="goods-item flex-column" v-for="(item, index) in goodsList" :key="index"
					@click="pageTo(`/pages/goods-detail?id=${item.id}`)">
					<image class="goods-image" :src="item.productImage"></image>
					<view class="flex-1 flex--center mx-10">
						<view class="flex-1 uv-line-1 fs-22">{{item.productName}}</view>
						<uv-icon name="arrow-right" color="#bfbfbf" size="16rpx"></uv-icon>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		changeAvatar,
		uploadFile
	} from '@/common/uploadFile.js'
	export default {
		name: 'Customer',
		data() {
			return {
				goodsList: [],
				total: 0,
				pageNum: 1,
				pageSize: 10000,
				nolist: false,
				
				codeText2: "获取验证码",
				time2: 0,
				timer2: null,
				amount:0,
				params:{
					phone:"",
					 code:'',
					 nickName:""
				},
				isshow:'1'
				
				
				
			}
		},
		methods: {
			open(i) {
				this.isshow = i
				this.params = {
					phone:"",
					 code:'',
					 nickName:""
				}
				this.$refs.popup.open('bottom');
			},
			// 发送手机验证码
			async sendCode() {
				if (!this.params.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: "none",
						duration: 1500
					});
					return
				}
				let re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
				let result = re.test(this.params.phone);
				if (!result) {
					uni.showToast({
						title: '手机号格式有误',
						icon: "none",
						duration: 1500
					});
					return
				}
				if (this.time2 != 0) {
					uni.showToast({
						title: "稍后重试",
						icon: 'none'
					})
					return
				}
			
				let resultx = await this.$api.sendSms({
					phone:this.params.phone
				})
				if (resultx) {
					uni.showToast({
						title: '发送成功',
						icon: "none"
					});
					this.time2 = 30
					this.timer2 = setInterval(() => {
						this.time2--
						this.codeText2 = this.time2 + "s后重新发送"
						if (this.time2 == 0) {
							clearInterval(this.timer2)
							this.codeText2 = '发送验证码'
						}
					}, 1000)
				}
			},
			async submit() {
				if(this.isshow == '1'){
					if (!this.params.nickName) {
						uni.showToast({
							title: '名称不能为空',
							icon: 'none'
						})
						return
					}
					let result = await this.$api.postUserEdit({
						nickName: this.params.nickName,
						openid: uni.getStorageSync('openid')
					})
					if (result) {
						this.close()
						this.funGetUserInfo()
					}
					
				}else{
					function validatePhoneNumber(phoneNumber) {
						const regex = /^1[3456789]\d{9}$/;
						return regex.test(phoneNumber);
					}
					if (this.params.phone && !validatePhoneNumber(this.params.phone)) {
						uni.showToast({
							title: '手机号格式有误',
							icon: 'none'
						})
						return
					}
					
					this.$api.CheckSms({
						customerPhone: this.params.phone,
						code: this.params.code
					}).then(res=>{
						if(res.code == 200){
							this.$api.postBindPhone({
								phone: this.params.phone,
								openid: uni.getStorageSync('openid')
							}).then(ress=>{
								if (ress.code== 200) {
									uni.showToast({
										title: '绑定成功',
										icon: 'none'
									})
									this.close()
									this.funGetUserInfo()
									this.$api.postOrderSearchAmount({}).then(res=>{
										this.amount = res.data.amount
									})
								}
							})
						
						}
					})
					
					
				}
			},
			gomingx(){
				if(uni.getStorageSync('userInfo').phone == ''){
					this.isshow = '2'
					this.$refs.popup.open('bottom');
				}else{
					uni.navigateTo({
						url:'/pages/mingx'
					})
				}
			},
			async funGetUserInfo() {
				const result = await this.$api.postUserInfo({
					openid: uni.getStorageSync('openid')
				})
				this.$store.commit('SET_USER_INFO', result.data)
			},
			change(e) {
				console.log('弹窗状态改变：', e);
			},
			close() {
				this.$refs.popup.close();
			},
	
			pageTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 修改头像
			handleChangeAvatar() {
				uni.chooseMedia({
					count: 1, // 最多可以选择的文件个数, 默认 9（注意：ios不可大于9）
					mediaType: ['image'], // 文件类型 image=只能拍摄图片或从相册选择图片, video=只能拍摄视频或从相册选择视频, mix=可同时选择图片和视频
					sourceType: ['album', 'camera'], // 图片和视频选择的来源 album=从相册选择, camera=使用相机拍摄
					sizeType: ['original', 'compressed'], // 仅对 mediaType 为 image 时有效，是否压缩所选文件
					// maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持60秒。
					success: async (chooseResult) => {
						console.log(chooseResult)

						uni.showLoading({
							title:'头像上传中',
							mask: true
						})
						const uploadResult = await uploadFile({
							tempFilePath: chooseResult.tempFiles[0].tempFilePath
						})
						if (uploadResult) {
							let result = await this.$api.postUserEdit({
								headImgUrl: uploadResult.url,
								openid: uni.getStorageSync('openid')
							})
							if (result) {
								uni.hideLoading()
								this.funGetUserInfo()
							}
						}
					},
					fail: (error) => {
						console.log(error)
						if (error.errMsg !== 'chooseMedia:fail cancel') {
							uni.showToast({
								title: error.errMsg,
								icon: 'none'
							})
						}
					},
				})
			},
			funOnShow() {
				this.funLoadList()
				this.$api.postOrderSearchAmount({}).then(res=>{
					this.amount = res.data.amount
				})
			},
			funOnReachBottom() {
				console.log('客户端首页 onReachBottom')
			},
			// 退出登录
			handleLogout() {
				uni.showLoading({
					title: '安全退出中..',
					mask: true
				})
				setTimeout(()=>{
					uni.reLaunch({
						url: '/pages/login/role'
					})
					this.$store.dispatch('LogOut')
				},800)
				
			},
			// 加载列表
			async funLoadList() {
				const result = await this.$api.postProductList({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				})
				if (result) {
					this.goodsList = result.rows
					this.total = Math.ceil(result.total / this.pageSize);
					this.nolist = this.total == 0
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.centent {
		margin: 0 auto;
		height: 39vh;
		overflow: auto;
	}
	.pop {
		padding: 40rpx 30rpx 10rpx;
		.input-wrap {
			width: 660rpx;
			height: 86rpx;
			box-sizing: border-box;
			box-shadow: 0rpx 11rpx 43rpx 8rpx rgba(246, 226, 223, 0.56);
			margin: 20rpx auto;
		}
		.btn{
			width: 260rpx;
			height: 80rpx;
			background: #FF4C2A;
			border-radius: 14rpx;
			margin: 60rpx auto 0rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
		.title{
			text-align: center;
			font-size: 32rpx;
			color: #FF4C2A;
			font-family: PingFang SC;
			font-weight: bold;
		}
	}
	.header {
		.item+.item {
			margin-left: 33rpx;
		}
	}

	// 用户信息
	.user-info-wrap {
		margin-top: 23rpx;
		height: 257rpx;
		box-sizing: border-box;
		
		.user-info-bg {
		}
        .lfes{
			padding: 18rpx 33rpx 20rpx 33rpx;
		}
		.user-avatar {
			margin-right: 15rpx;
			width: 98rpx;
			height: 98rpx;
		}

		.logout-button {
			width: 169rpx;
			height: 57rpx;
		}
		.xz{
			padding: 18rpx 33rpx 28rpx 33rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #eee;
			image{
				width: 86rpx;
				height: 70rpx;
			}
			.right{
				display: flex;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #FF3C11;
				align-items: center;
			}
		}
	}

	// 订单查询和在线客服
	.order-and-customer-service {
		margin-left: 26rpx;
		margin-right: 26rpx;

		.item {
			width: 342rpx;
			height: 240rpx;
			padding-left: 30rpx;
			padding-top: 40rpx;
			padding-bottom: 45rpx;
			box-sizing: border-box;
		}

		.image {
			width: 155rpx;
			height: 155rpx;
		}

		.query-button {
			width: 130rpx;
			height: 46rpx;
		}
	}

	// 商品列表
	.goods-container {
		margin: 0 14rpx 0 26rpx;
		.goods-item {
			width: 227rpx;
			height: 276rpx;
			background: #ffffff;
			border-radius: 14rpx;
			margin-right: 10rpx;
			margin-bottom: 15rpx;
		}

		.goods-image {
			width: 227rpx;
			height: 219rpx;
			border-radius: 14rpx 14rpx 0 0;
		}
	}
</style>